<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<uni-header></uni-header>
		<!-- #endif -->

		<view class="order-box com-box">
			<!-- 地址 -->
			<view v-if="orderDetail.province" class="address-section">
				<view class="order-content">
					<text class="icon icon-region"></text>
					<view class="cen">
						<view class="top">
							<text class="name">{{orderDetail.consignee}}</text>
							<text class="mobile">{{orderDetail.phone}}</text>
						</view>
						<text class="address">{{orderDetail.province}} {{orderDetail.city}} {{orderDetail.county}}
							{{orderDetail.address}}</text>
					</view>
					<text class="icon icon-arrow_right"></text>
				</view>

				<image class="a-bg" src="/static/arc.png"></image>
			</view>

			<view class="goods-section">
				<!-- 商品列表 -->
				<view v-for="(item, index) in orderDetail.skuList" :key="index" class="g-item">
					<image :src="item.img"></image>
					<view class="right">
						<text class="title clamp">{{item.spuTitle}}</text>
						<text class="spec">{{item.title}}</text>
						<view class="price-box">
							<text class="price">
								<text v-if="item.price < item.originalPrice" style="text-decoration:line-through">￥{{item.originalPrice | priceFormat}}</text>
								<text>￥{{item.price | priceFormat}}</text>
							</text>
							<text class="number">x {{item.num}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 金额明细 -->
			<view class="row-list">
				<view class="row">
					<text class="tit clamp">商品金额</text>
					<text class="tip">￥{{orderDetail.skuOriginalTotalPrice | priceFormat}}</text>
				</view>
				<view v-if="orderDetail.skuOriginalTotalPrice > orderDetail.skuTotalPrice" class="row">
					<text class="tit clamp">折扣金额</text>
					<text class="tip red">-￥{{(orderDetail.skuOriginalTotalPrice - orderDetail.skuTotalPrice) | priceFormat}}</text>
				</view>
				<view v-if="orderDetail.couponPrice" class="row">
					<text class="tit clamp">优惠券立减</text>
					<text class="tip red">-￥{{orderDetail.couponPrice | priceFormat}}</text>
				</view>
				<view class="row">
					<text class="tit clamp">运费</text>
					<text class="tip">{{orderDetail.freightPrice > 0 ?( '+¥' + (orderDetail.freightPrice / 100.0)) : '免运费'}}</text>
				</view>
			</view>
		</view>

		<!-- #ifdef H5 -->
		<uni-footer></uni-footer>
		<!-- #endif -->
	</view>
</template>

<script>
	import uniHeader from '@/components/h5/uni-header.vue'
	import uniFooter from '@/components/h5/uni-footer.vue'
	export default {
		components: {
			uniHeader,
			uniFooter
		},
		filters: {
			priceFormat(price) {
				return price / 100.0
			},
			dateFormat(time) {
				return 'temp'
				//return formatDate(new Date(time),'yyyy-MM-dd HH:mm')
			}
		},
		data() {
			return {
				orderId: '',
				orderDetail: {
					skuList: [],
					totalOriginalPrice: 0,
					totalPrice: 0, //商品折扣（仅算VIP和限时打折）后总价
					coupon: undefined,
					mono: ''
				}
			}
		},
		onLoad(option) {
			this.orderId = option.orderid
			this.loadData()
		},
		methods: {
			//显示优惠券面板
			loadData() {
				this.$api.request('order', 'getOrderDetail', {
					orderId: this.orderId
				}).then(res => {
					this.orderDetail = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 100upx;
	}

	.row {
		justify-content: space-between;

		.tit {
			width: 240upx;
		}

		.uni-input {
			display: flex;
		}

		input {
			font-size: $base-font-base;
			color: $base-color-dark;
			text-align: right;
		}
	}

	/* 支付列表 */
	.pay-list {
		padding-left: 40upx;
		margin-top: 16upx;
		background: #fff;

		.pay-item {
			display: flex;
			align-items: center;
			padding-right: 20upx;
			line-height: 1;
			height: 110upx;
			position: relative;
		}

		.icon-weixinzhifu {
			width: 80upx;
			font-size: 40upx;
			color: #6BCC03;
		}

		.icon-alipay {
			width: 80upx;
			font-size: 40upx;
			color: #06B4FD;
		}

		.icon-xuanzhong2 {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60upx;
			height: 60upx;
			font-size: 40upx;
			color: $base-color-page;
		}

		.tit {
			font-size: 32upx;
			color: $base-color-dark;
			flex: 1;
		}
	}

	/* #ifdef H5 */
	@media screen and (min-width: 750px) {
		page {
			padding-bottom: 0;
		}

		.order-box {
			margin: 20px auto;
		}

		.row {
			justify-content: space-between;

			.tit {
				width: 240upx;
			}

			.uni-input {
				display: flex;
			}

			input {
				font-size: $base-font-base;
				color: $base-color-dark;
				text-align: right;
			}
		}

		/* 支付列表 */
		.pay-list {
			padding-left: 40upx;
			margin-top: 16upx;
			background: #fff;

			.pay-item {
				display: flex;
				align-items: center;
				padding-right: 20upx;
				line-height: 1;
				height: 110upx;
				position: relative;
			}

			.icon-weixinzhifu {
				width: 80upx;
				font-size: 40upx;
				color: #6BCC03;
			}

			.icon-alipay {
				width: 80upx;
				font-size: 40upx;
				color: #06B4FD;
			}

			.icon-xuanzhong2 {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 60upx;
				height: 60upx;
				font-size: 40upx;
				color: $base-color-page;
			}

			.tit {
				font-size: 32upx;
				color: $base-color-dark;
				flex: 1;
			}
		}
	}

	/* #endif */
</style>
